<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/css-head :: css-head">
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>在线答题</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/loading/style.css" rel="stylesheet">
    <style type="text/css">
        hr {
            margin-top: 15px;
        }

        html, body {
            width: 100%;
        }
    </style>
</head>
<body style="background: url('/static/images/wx_bj/bj_2.jpg') no-repeat; background-size: 100% 100%;font-size: 15px;">
<span class="bi bi-reply-all-fill" id="back_btn"
      style=" position: fixed;bottom: 0;right: 0;width: 30px;height: 30px"></span>
<div style="position: fixed;
    bottom: 2px;
    right: 2px;
    width: 65px;
    height: 65px;background: url('/static/images/reHomeIco.png') no-repeat;
    background-size: 100% 100%;
    " onclick="reHome()">
</div>

<div id="loading"
     style="display: none;position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(255,255,255,.5);text-align: center;line-height: 60;">
    <div class="sp sp-circle" style="display: inline-block;top: 50%;left: 50%"></div>
</div>
<div style="width: 100%;height: 100%;overflow: auto">
    <div id="form1" style=" width:90%; margin:2px auto;font-size: 20px;">
        <form action="postExam" method="post" name="examform">
            <div style="margin-top: 20px; text-align: center;">
                <h5 class="modal-title text-center" id="accLogModelHead" style="font-size: 3rem">
                    宝鸡市总工会<br>
                    劳动法律知识竞赛
                </h5>

                <h6 class="modal-title text-center" style="font-size: 2rem"
                    th:text="${session.answerType}==1?'初赛答题':'复赛答题'"></h6>
                <h6 class="modal-title text-center" hidden="hidden" id="answerType"
                    th:text="${session.answerType}"></h6>
                <div style="text-align: center;">&nbsp;&nbsp;考 试 限 时：<span id="sp3"
                                                                           th:text="${session.answerType}==1?'50分钟':'60分钟'"></span>
                </div>
                <div style="text-align: center;">剩 余 时 间：<span id="sp4"></span>
                    <input id="usetime" type="hidden" value="0"/>
                    <input id="staffid" th:value="${session.staffid}" type="hidden"/>
                    <input id="openId" th:value="${session.openId}" type="hidden"/>
                </div>
                <div>
                    <hr style=" height:1px;">
                </div>
                <div th:each="m,iterStat:${questions}">
                    <div class="panel panel-default" style="    text-align: justify;
    text-align-last: left;">
                        <div class="panel-body">
                            <!--                        th:text="'Q'+${iterStat.index+1}+'.'+  (${m.type}=='单选题'?'【单选题】':'【多项选择题】')   + ${m.questionname}"-->
                            <span th:text="'Q'+${iterStat.index+1}+'.'"></span>
                            <span th:text="(${m.type}=='单选题'?'【单选题】':'【多项选择题】')   + ${m.questionname}"> </span>
                        </div>
                        <table class="table" style="margin-bottom: 0">
                            <tr>
                                <td>
                                    <label style="font-weight: normal;width: 100%">
                                        <input class="q_input" required style="width: 16px;height: 16px"
                                               th:name="${m.id}"
                                               th:text="' A、'+${m.optionA}"
                                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="A">
                                    </label>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <label style="font-weight: normal;width: 100%">
                                        <input class="q_input" required style="width: 16px;height: 16px"
                                               th:name="${m.id}"
                                               th:text="' B、'+${m.optionB}"
                                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="B">
                                    </label>
                                </td>
                            </tr>
                            <tr th:if="${m.optionC!=null&&m.optionC!=''}">
                                <td>
                                    <label style="font-weight: normal;width: 100%">
                                        <input class="q_input" required style="width: 16px;height: 16px"
                                               th:name="${m.id}"
                                               th:text="' C、'+${m.optionC}"
                                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="C">
                                    </label>
                                </td>
                            </tr>
                            <tr th:if="${m.optionD!=null&&m.optionD!=''}">
                                <td>
                                    <label style="font-weight: normal;width: 100%">
                                        <input class="q_input" required style="width: 16px;height: 16px"
                                               th:name="${m.id}"
                                               th:text="' D、'+${m.optionD}"
                                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="D">
                                    </label>
                                </td>
                            </tr>
                            <tr th:if="${m.optionE!=null&&m.optionE!=''}">
                                <td>
                                    <label style="font-weight: normal;width: 100%">
                                        <input class="q_input" required style="width: 16px;height: 16px"
                                               th:name="${m.id}"
                                               th:text="' E、'+${m.optionE}"
                                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="E">
                                    </label>
                                </td>
                            </tr>
                            <tr th:if="${m.optionF!=null&&m.optionF!=''}">
                                <td>
                                    <label style="font-weight: normal;width: 100%">
                                        <input class="q_input" required style="width: 16px;height: 16px"
                                               th:name="${m.id}"
                                               th:text="' F、'+${m.optionF}"
                                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="F">
                                    </label>
                                </td>
                            </tr>
                            <tr th:if="${m.optionG!=null&&m.optionG!=''}">

                                <td>
                                    <label style="font-weight: normal;width: 100%">
                                        <input class="q_input" required style="width: 16px;height: 16px"
                                               th:name="${m.id}"
                                               th:text="' G、'+${m.optionG}"
                                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="G">
                                    </label>
                                </td>
                            </tr>
                            <tr th:if="${m.optionH!=null&&m.optionH!=''}">
                                <td>
                                    <label style="font-weight: normal;width: 100%">
                                        <input class="q_input" required style="width: 16px;height: 16px"
                                               th:name="${m.id}"
                                               th:text="' H、'+${m.optionH}"
                                               th:type="${m.type}=='单选题'?'radio':'checkbox'" th:value="H">
                                    </label>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </div>
            <div style="width: 100px;margin: 0 auto 100px">
                <input id="submi" style="background: #00a0e9; height: 35px; width: 100px; color: white;" type="button"
                       value="提交"
                       width="100">
            </div>
            <div style="height: 10px;width: 10px"></div>
        </form>

        <!-- Modal -->
        <div aria-hidden="true" aria-labelledby="myModalLabel" class="modal fade" data-backdrop="static" id="myModal"
             role="dialog" tabindex="-1">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <p style="text-align: center" th:text="${session.answerType}==1?'答题须知(初赛)':'答题须知(复赛)'">答题须知</p>
                    </div>
                    <div class="modal-body" style="line-height: 20px">
                        <p>竞赛题目由题库随机抽取，</p>
                        <p>题目类型包含：</p>
                        <p th:text="${session.answerType}==1?'单选(60题，1分/题)、':'单选(100题，0.5分/题)'">单选(60题，1分/题)、</p>
                        <p th:text="${session.answerType}==1?'多选(20题，2分/题),总分100分。':'多选(50题，1分/题),总分100分。'">
                            多选(20题，2分/题),总分100分。</p>
                        <p>答题时间为 <strong th:text="${session.answerType}==1?'50分钟':'60分钟'">50分钟</strong> 。</p>
                        <p>每人有<strong>2次</strong>答题机会，取最高分。</p>
                        <p>刷新页面将导致题目发生变化，并重新计时。</p>
                        <p>完成答题，请点击页面最下方提交按钮。</p>
                        <p>答题超时，系统将自动为您提交。</p>
                    </div>
                    <div class="modal-footer" style="text-align: center">
                        <span hidden="hidden" id="desc" style="font-size: 10px;color: red">点击下方【我知道了，开始答题，并计时开始】</span>
                        <button class="btn btn-default" data-dismiss="modal" disabled="disabled" id="start_btn"
                                type="button">我知道了,开始答题
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="/static/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/static/bower_components/jquery/dist/jquery.cookie.js"></script>
<script src="/static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
    let answerType = $("#answerType").text();
    let openId = $("#openId").val();

    $(function () {
        let h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
        $("body").height(h + 'px');
        $('#myModal').modal({backdrop: 'static', keyboard: false, show: true});
    })
    let i = 2 // 答题须知阅读倒计时时间 8s
    let start = setInterval(function () {
        let $startBtn = $("#start_btn");
        i--;
        $startBtn.text("我知道了(" + i + "s)")
        if (i === 0) {
            $startBtn.removeAttr("disabled");
            $("#desc").show();
            $startBtn.text("我知道了,开始答题")
            clearInterval(start);
        }
    }, 1000)
    $('#myModal').on('hidden.bs.modal', function (e) {

        if (answerType === "1") {
            show_time(3000);
        }
        if (answerType === "2") {
            show_time(3600);
        }
        $("#submi").click(function () {
            let flag = confirm("确定要交卷吗？");
            if (flag) {
                $("#submi").attr("disabled", true).val("正在提交...").css('backgroundColor', '#888888');
                let res = validate_all();
                let staffid = $("#staffid").val();
                let usetime = getUsetime($("#usetime").val());
                console.log(res);
                saveScore(res, staffid, usetime);
            } else {
                return false;
            }
        });
    });

    function saveScore(res, staffid, use_time) {
        $.ajax({
            url: "/exam/examCommit/" + answerType,
            type: "post",
            dataType: "json",
            cache: false,
            data: {
                res: res,
                staffid: staffid,
                use_time: use_time
            },
            success: function (data) {
                if (data.status === 'success') {
                    location.href = "/exam/toResult";
                } else {
                }
            }
        });
    }

    function validate_all() {
        /*  let radioName = [];
          $(":radio").each(function(){
              radioName.push($(this).attr("name"));
          });
          let checkboxName = [];
          $(":checkbox").each(function(){
              checkboxName.push($(this).attr("name"));
          });*/
        let radioName = [];
        $(".q_input").each(function () {
            radioName.push($(this).attr("name"));
        });

        /* radioName.sort();*/
        $.unique(radioName);
        // $.unique(checkboxName);
        let res = '';
        $.each(radioName, function (i, val) {
            let type = $("[name=" + val + "]").attr('type');
            if (type === "radio") {
                let str = $("input[name=" + val + "]:checked").val();
                res += str != null && str !== '' ? str + "-" + i + "," : ',';
            } else if (type === "checkbox") {
                let str = "";
                $("input[name=" + val + "]:checked").each(function () {
                    str += $(this).val();
                })
                res += str != null && str !== '' ? str + "=" + i + "," : ',';
            }
        });
        /* $.each(checkboxName,function(i,val){
             let str="";
             $("input[name="+val+"]:checked").each(function(){
                 str+=$(this).val();
             })
             res+=val!=null?str+"-"+i+",":',';
         });*/

        return res;
    }

    function show_time(totalTime) {
        if (totalTime <= 0) {
            let res = validate_all();
            let staffid = $("#staffid").val();
            let usetime = getUsetime($("#usetime").val());
            saveScore(res, staffid, usetime);
        }
        if (totalTime > 0) {
            let remainTime = totalTime - 1;
            let min = remainTime / 60;
            min = parseInt(min);
            let s = remainTime % 60;
            if (s < 10) {
                s = "0" + s;
            }
            let str = min + ":" + s;
            $("#sp4").text(str);
            $("#timer").text(str);
            if (totalTime < 600) {
                $("#timer").text("距离答题结束时间只有" + str + "了,抓紧时间哦！");
            }
            if (answerType === "1") {
                $("#usetime").val(50 * 60 - remainTime);
            }
            if (answerType === "2") {
                $("#usetime").val(60 * 60 - remainTime);
            }

            setTimeout("show_time(" + remainTime + ")", 1000);
        }
    }

    function getUsetime(remainTime) {
        let min = remainTime / 60;
        min = parseInt(min);
        let s = remainTime % 60;
        if (s < 10) {
            s = "0" + s;
        }
        return min + ":" + s;
    }

    function checkAllChecked() {
        let name = $(":radio").attr('name');
        $.unique(name);
    }

    pushHistory();

    function pushHistory() {
        history.pushState('', '', '/goWxIndex?id=' + openId)
    }

    function reHome() {
        $("#loading").show();
        window.location.href = "/goWxIndex?id=" + openId;
    }
</script>
</html>
